<template>
	<view class="myCard">
		<view class="tabSelect">
			<view :class="[curIndex==index?'activeItem':'item','narItem']" v-for="(i,index) in tabList" :key="index"
				@click="selectItem(index)">
				{{i.name}}
			</view>
		</view>
		<view class="list">
			<view class="listItem y-c" v-for="(i,index) in list" :key="index" @click="goDetails(i.id)" >
				<view class="item_top y-c border">
					<view class="item_top_row x-bc mb-2">
						<view>{{i.name}}</view>
						<view>¥{{i.price}}/次</view>
					</view>
				</view>
				<view class="item_bot y-c">
					<view class="item_top_row x-bc mb-2 mt-2">
						<view class="next">下单时间：{{i.createtime.substring(0,10)}}</view>
						<view class="cancel" v-if="i.status == 0">
							待付款
						</view>
						<view class="cancel" v-else-if="i.status == 2">
							已取消
						</view>
						<view class="seeOrder" v-else @click.stop="getOrder(i)">
							查看券码
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noMore" v-if="last_page==form.page&&list.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
			数据加载完成
		</view>
		<u-empty text="暂无列表哦~~" mode="list" v-if="list.length==0" margin-top='50'></u-empty>
	</view>
</template>

<script>
	import {
		orderList
	} from '@/request/api.js'
	export default {
		data() {
			return {
				fromPage:'my',
				tabList: [{
						name: '卡包'
					},
					{
						name: '商家'
					}
				],
				curIndex: 0,
				list: [],
				form: {
					page: 1,
					status:'',
					type_data: 1
				},
				last_page: 1,
			}
		},
		onReachBottom() {
			// console.log(111)
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.getList()
			}
		},
		onLoad(data) {
			if(data.form == 'index'){//如果来自首页
				// this.fromPage = 'index'
				this.form.status = 1
			}
			console.log(this.fromPage,'from')
			this.form.page = 1
			this.list = []
			this.getList()
		},
		methods: {
			canceOrder(i) {
				console.log(i, 'cancel')
			},
			getOrder(i) {
				let type = 1;
				if (this.form.type_data == 1) {
					type = 1
				} else {
					if (i.type_data == 0) {
						type = 0
					} else {
						type = 2
					}
				}
				let data = {
					id: i.id,
					type: type,
					score: 1
				}
				uni.navigateTo({
					url: '/pages/index/showCode/showCode?form=' + JSON.stringify(data)
				})
				// console.log(i,'see')
			},
			async getList() {
				let res = await orderList(this.form)
				this.list = this.list.concat(res.data.data)
				// if(this.fromPage == 'index'){
				// 	this.list =this.list.filter(item => item.status != 2)
				// }
				// console.log(this.list,'this.list')
				this.last_page = res.data.last_page
				console.log(this.list, 'list')
			},
			selectItem(index) {
				this.curIndex = index;
				this.form.type_data = index + 1
				this.form.page = 1
				this.list = []
				this.getList()
			},
			goDetails(i) {
				uni.navigateTo({
					url: '/my_pages/orderDetails/orderDetails?id=' + i
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myCard {
		padding: 40rpx;

		.tabSelect {
			display: flex;
			font-size: 32rpx;
			display: flex;
			background: #fff;
			margin: -40rpx;
			padding: 20rpx 40rpx;

			.narItem {
				color: #979797;
				margin-right: 60rpx;
			}

			.item {}

			.activeItem {
				color: #000;
				font-weight: 600;
				position: relative;
			}

			.activeItem::after {
				content: '';
				position: absolute;
				width: 40px;
				height: 4px;
				left: .8px;
				bottom: -2px;
				background: linear-gradient(270deg, #3BA199 -50%, rgba(59, 161, 153, 0) 77.73%);
				border-radius: 30px;
			}
		}

		.list {
			margin-top: 60rpx;

			.cancel {
				background: #EEEEEE;
				border-radius: 5px;
				color: #979797;
				padding: 8rpx 20rpx;
			}

			.seeOrder {
				background: #C0EAE4;
				border-radius: 5px;
				color: #2CB9A4;
				padding: 8rpx 20rpx;
			}

			.listItem {
				margin-top: 20rpx;
				color: $common-color;
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.item_over {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}

		.border {
			border-bottom: 0.5rpx solid rgba(217, 217, 217, 0.6);
		}

		.item_bot {
			.next {
				color: #BABABA;
			}

			.image {
				width: 116rpx;
				height: 100rpx;
			}
		}

	}
</style>